<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./gouwu.css"/>
	</head>
	<body>
		<div class="warp">
		    <div class="cart-top"><span>购物车</span></div>
		    <div>
		        <ul class="plist">
		           <li>
		                <div class="con-l"><img src="$(pobj.pid)"></div>
		                <div class="con-r">
		                    <div class="con-r-1">
		                        <p>新乐敦滴眼液</p>
		                    </div>
		                    <div class="con-r-2">
		                        <p>￥23.00</p>
		                    </div>
		                    <div class="con-r-3">
		                        <span>-</span>
		                        <input type="text">
		                        <span>+</span>
		                    </div>
		                    <div class="con-r-4">
		                        <p>￥23.00</p>
		                    </div>
		                    <div class="con-r-5">
		                        <i class="iconfont icon-shanchudelete30">×</i>
		                    </div>
		                </div>
		            </li>
		        </ul>
		    </div>
		    <div class="cart-bottom">
		        <div class="cart-bottom-l">
		            <p>已选择 &nbsp;<span id="cart-pnum"></span>&nbsp; 件商品</p>
		        </div>
		        <div class="cart-bottom-r">
		            <div class="cart-bottom-r-1">
		                <i>总价</i>
		                <span id="zongJia">￥00.00</span>
		            </div>
		            <div class="cart-bottom-r-2">
		                <p>支持免邮</p>
		            </div>
		            <div class="cart-bottom-r-3">
		                <button id="btn-go-plist">继续购物</button>
		                <button id="btn-go-price">去结算</button>
		            </div>
		            <div class="cart-bottom-r-4">
		                <p>请在下一步使用优惠券</p>
		            </div>
		        </div>
		    </div>
		</div>
		<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			 let user = localStorage.getItem("username")
			        let uid = localStorage.getItem("uid")
			        if (user) {
			            $('#user').html("用户：" + user + '&nbsp;&nbsp;<a id="userOut" href="javscript:;">退出</a>')
			            $('#userOut').click(function () {
			                localStorage.clear()
			            })
			        }
			        //---------加载用户购物车中的商品
			        $.ajax({
			            url: "http://jx.xuzhixiang.top/ap/api/cart-list.php",
			            type: "get",
			            data: {
			                id: uid
			            }
			        }).then(res => {
						console.log(res)
			            let arr = res.data;
			            if (arr.length >= 1) {
			                let html = '';
			                for (let i = 0; i < arr.length; i++) {
			                    html += `
			                    <li>
			                    <div class="con-l"><img src="${arr[i].pimg}"></div>
			                    <div class="con-r">
			                        <div class="con-r-1">
			                            <p>${arr[i].pname}</p>
			                        </div>s
			                        <div class="con-r-2">
			                            <p>￥${arr[i].pprice}</p>
			                        </div>
			                        <div class="con-r-3">
			                            <span class="sub-btn" data-pid="${arr[i].pid}">-</span>
			                            <input type="text" value="${arr[i].pnum}" disabled="disabled">
			                            <span class="add-btn" data-pid="${arr[i].pid}">+</span>
			                        </div>
			                        <div class="con-r-4">
			                            <p class="pid-price">￥${(arr[i].pnum * arr[i].pprice).toFixed(2)}</p>
			                        </div>
			                        <div class="con-r-5">
			                            <i data-pid="${arr[i].pid}" class="del-btn iconfont icon-shanchudelete30">x</i>
			                        </div>
			                    </div>
			                </li>
			                    `
			                }
			                $(".plist").html(html)
			
			                let num2 = 0
			                for(let i=0;i<arr.length;i++){
			                    num2 += parseFloat(arr[i].pnum)
			                }
			                 $('#cart-pnum').html(num2)
			                
			                 let priceArr = $('.pid-price').text().slice(1).split("￥")
			            let num = 0
			            for (let i = 0; i < priceArr.length; i++) {
			                num += parseFloat(priceArr[i])
			            }
			            console.log(num);
			            $('#zongJia').html('￥' + num.toFixed(2))
			                
			           
			                /* -----------加按钮------减按钮 ----- 删除按钮--------- */
			                //删除
			                $('.del-btn').on('click', function () {
			                    let pid = $(this).attr('data-pid')
			                    
			                    $.ajax({
			                        url: 'http://jx.xuzhixiang.top/ap/api/cart-delete.php',
			                        type: "get",
			                        data: {
			                            uid, pid
			                        }
			                    }).then(res => {
			                        //////////////待测试 ----------------
			                        let a = $(this).parent().parent().children('.con-r-3').children('input').val()
			                        console.log($('#cart-pnum').text());
			                        console.log(a);
			                        let c = $('#cart-pnum').text()
			                        $('#cart-pnum').text(c-a)
			                        //////////////////////------------
			
			                        $(this).parent().parent().parent().remove()
			                        alert(res.msg)
			                        location.reload()
			                       
			                    })
			                    
			                    
			                })
			                //加按钮
			                $('.add-btn').click(function () {
			                    let pid = $(this).attr('data-pid')
			                    let pObj = arr.find(v => v.pid == pid)
			                    pObj.pnum++;
			                    $(this).prev().val(pObj.pnum)
			                    $.ajax({
			                        url: "http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
			                        type: "get",
			                        data: {
			                            uid, pid, pnum: pObj.pnum
			                        }
			                    }).then(res => {
			                        
			                        countPrice(pObj, this,arr)
			                    })
			                })
			                //减按钮
			                $('.sub-btn').click(function () {
			                    let pid = $(this).attr('data-pid')
			                    let pObj = arr.find(v => v.pid == pid)
			                    if (pObj.pnum == 1) {
			                        return
			                    }
			                    pObj.pnum--;
			                    $(this).next().val(pObj.pnum)
			                    $.ajax({
			                        url: "http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
			                        type: "get",
			                        data: {
			                            uid, pid, pnum: pObj.pnum
			                        }
			                    }).then(res => {
			                        
			                        countPrice(pObj, this,arr)
			                    })
			                })
			
			
			            } else {
			                $(".plist").html('空空如也不明觉厉')
			            }
			        })
			
			        /* 加减按钮算单个商品的总价函数封装 */
			        function countPrice(pObj, element,plist) {
			            $(element).parent().next().children().html('￥' + (pObj.pnum * pObj.pprice).toFixed(2))
			
			            let arr = $('.pid-price').text().slice(1).split("￥")
			            let num = 0
			            for (let i = 0; i < arr.length; i++) {
			                num += parseFloat(arr[i])
			            }
			            console.log(num);
			            $('#zongJia').html('￥' + num.toFixed(2))
			
			            //总共购买了多少件商品//
			            
			            let num2 = 0
			            for(let i=0;i<plist.length;i++){
			                num2 += parseFloat(plist[i].pnum)
			            }
			            $('#cart-pnum').html(num2)
			
			        }
			        /* ----------   总价 ---------------  */
			
			        //继续购物按钮
			        $("#btn-go-plist").on('click', function () {
			            location.href = 'xiangmu.html'
			        })
			
		</script>
	</body>
</html>
